<template>
  <mescroll-vue ref="mescroll" :down="mescrollDown" @init="mescrollInit">
    <el-col v-for="(item, index) in messageList" :key="index">
      <el-card shadow="never" @click.native="messageDetailsPage(item)">
        <div class="top">
          <span class="messageId">{{ item.messageId }}</span>
          <span class="createDate">{{ item.createDate }}</span>
        </div>
        <hr />
        <div class="item">
          <span>消息：</span>
          <div class="messageStr">{{ item.messageStr }}</div>
        </div>
      </el-card>
    </el-col>
  </mescroll-vue>
</template>

<script>
// 引入mescroll的vue组件
// 文档：http://www.mescroll.com/api.html#begin
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  components: {
    MescrollVue // 注册mescroll组件
  },
  created() {
    this.getData()
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.downCallback
      },
      messageList: [
        {
          adminId: '',
          createDate: 0,
          messageId: 0,
          messageStr: ''
        }
      ]
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    messageDetailsPage(item) {
      this.$router.push({
        name: 'MessageDetails',
        params: {
          item: item
        }
      })
    },
    downCallback() {
      setTimeout(() => {
        this.getData()
        this.mescroll.endSuccess()
      }, 1000)
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    getData() {
      // 一开始获取订单列表
      this.$http
        .get('worker/message-list')
        .then(res => {
          this.messageList = res.data.data
          for (const item of this.messageList) {
            item.createDate = this.getLocalTime(item.createDate)
          }
        })
        .catch(() => {
          return this.$message.error('获取消息失败')
        })
    }
  }
}
</script>

<style  lang='less' scoped>
.top {
  width: 100%;
  position: relative;
  margin-top: 8px;
  font-weight: bold;
  color: rgb(129, 129, 129);
  .messageId {
    font-size: 30px;
  }
  .createDate {
    float: right;
    color: silver;
    font-size: 10px;
  }
}

.item {
  width: 100%;
  margin-bottom: 10px;
  span:first-child {
    font-size: 15px;
    margin-top: 8px;
    font-weight: bold;
    color: rgb(129, 129, 129);
  }

  .messageStr {
    float: right;
    color: #9d9d9d;
    margin-bottom: 10px;
  }
}

.el-card {
  width: 99%;
  box-shadow: 0 3px 3px rgb(207, 207, 207);
  border-radius: 20px;
  position: relative;
  margin-top: 5%;
}
</style>
